<template>
	<m-layout2 title="分类详情" class="box " :isShow="false">
		<m-search slot="header" placeholderText='请输入商品名称' lIconColor="#111" class="header" :sButton="false"
			:leftShow="true">
			<template slot="left">
				<view class="ml-12">
					分类
				</view>
			</template>
		</m-search>
		<view class="content" v-if="oneList.length">
			<view class="left">
				<silder :idx="isIdx">
					<template v-for="(item,idx) in oneList">
						<text :class="{active:idx==isIdx}" @click="tapIdx(item.id,item.tname,idx)">{{item.tname}}</text>
					</template>
				</silder>
			</view>
			<view class="right">
				<!-- 一级分类baner -->
				<template>
					<m-image2  radius="10" class="banner-img" :src="selectedObj.picurl" mode="aspectFill" />
					<!-- <m-image class="banner-img" lazy-load="" :src="selectedObj.picurl" mode="aspectFill" /> -->
				</template>
				<!-- 二级分类列表 -->
				<template>
					<view class="card-main">
						<template v-for="(item,idx) in twoList">
							<view @click="goDetails(item)">
								<view class="image-box">
									<m-image2 radius="10" :src="item.picurl" mode="aspectFill"/>
									<!-- <image :src="item.picurl" mode=""></image> -->
								</view>
								<text>{{item.tname}}</text>
							</view>
						</template>
					</view>
				</template>
			</view>
		</view>
		<view class="" v-else>
			<m-empty />
		</view>
	</m-layout2>
</template>

<!--
  scrollTo.behavior  表示滚动行为
  smooth (平滑滚动)，instant (瞬间滚动)，默认值 auto，效果等同于 instant
 -->
<script>
	import { GetGoodsTypePage } from '@/api/Goods.js'
	import silder from './components/silder.vue'
	import Item from './components/item.vue'
	export default {
		components: {
			silder,
			Item
		},
		data() {
			return {
				typeId: '',
				type: '',
				//当前分类的数据
				tList: [

				],
				secondIdx: 0,
				isIdx: 0,
				pid: 0,
				tName: '', // 一级分类名称
				oneList: [], // 一级分类列表
				twoList: [], // 二级分类列表
				// add
				selectedObj: {}, // 获取当前选中的 一级分类
			}
		},
		computed: {
			second() {
				try {
					return {
						categoryPictureList: [],
						...this.tList[this.isIdx]
					}
				} catch (e) {

					//TODO handle the exception
				}
			},
		},
		onLoad({ type, typeId }) {
			this.type = type;
			this.typeId = typeId;
			this.getData(this.pid);
		},
		watch: {
			//切换分类
			isIdx() {
				this.secondIdx = 0;
			},
		},
		methods: {
			goDetails(item) {
				this.Jump({
					url: '/pages/home/goodsList/goodsList',
					params: {
						oneId: item.pid,
						twoId: item.id,
						tName: item.tname,
					}
				})
			},
			//点击banner时
			handleBanner(item) {
				let reg = new RegExp('http')
				if (item.redirectionUrl) {
					if (reg.test(item.redirectionUrl)) {
						window.open(item.redirectionUrl)
					} else {
						this.Jump(item.redirectionUrl)
					}
				}
			},
			async getData() {
				const { success, list } = await GetGoodsTypePage({
					positions: '0',
					pid: this.pid,
					pageSize: 1000
				});
				this.oneList = list;
				await this.sleep(200);
				await this.getTList(list[0]['id']);
			},
			async getTList(id) {
				this.getSelectedOneObj(id)
				const { success, list } = await GetGoodsTypePage({
					pid: id,
					pageSize: 1000
				});
				this.twoList = list;
			},
			//点击时左侧分类时
			tapIdx(id, tname, index) {
				console.log('当前分类ID$下标======>', index)
				this.isIdx = index;
				this.tName = tname;
				this.getTList(id);

			},
			// 获取当前选中 的一级分类
			getSelectedOneObj(id) {
				let selected = this.oneList.filter(item => {
					return item.id == id
				})
				this.selectedObj = selected[0];
				console.log('selected===>', selected[0])
			}

		},
	};
</script>
<style lang='scss' scoped>
	.header {
		::v-deep .search-Item {
			background: #F5F5F5;
		}
	}

	.box {
		.content {
			width: 100%;
			height: 100%;
			overflow: hidden;
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
		}

		.left {
			width: 180rpx;
			height: 100%;
			background: #F3F3F3;

			&>view {
				width: 100%;
				height: 100%;
				overflow-y: scroll;
			}

			text {
				position: relative;
				display: block;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100rpx;
				text-align: center;

				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999;

				&::after {
					content: "";
					display: block;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 6rpx;
					height: 0rpx;
					border-radius: 3rpx;
					transition: all .15s;
				}
			}

			.active {
				background: #FFFFFF;
				font-weight: bold;
				color: var(--theme);

				&::after {
					height: 42rpx;
					background: var(--theme);
				}

			}
		}

		.right {
			flex: 1;
			padding: 0 24rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			overflow-y: scroll;

			.banner-img {
				width: 100%;
				height: 180rpx;
			}

			.swiper {
				height: 180rpx;

				::v-deep.uni-swiper-wrapper {
					overflow: hidden;
				}

				.swiper-item {
					height: 180rpx;

					.banner-img {
						width: 100%;
						height: 180rpx;
					}
				}

				::v-deep {
					.uni-swiper-dot {
						width: 10rpx;
						height: 10rpx;
						background: #f6f6f6 !important;
						border-radius: 5rpx;

						&.uni-swiper-dot-active {
							width: 20rpx;
						}
					}
				}
			}

			.card-main {
				position: relative;
				z-index: 1;
				padding: 30rpx 0;

				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
				grid-gap: 20rpx;

				&>view {
					text-align: center;

					.image-box {
						width: 156rpx;
						height: 156rpx;
						background: #FAFAFA;
						border-radius: 10rpx;
						overflow: hidden;
						padding: 10rpx;
						box-sizing: border-box;

						image {
							width: 100%;
							height: 100%;
						}
					}

					text {
						padding-top: 12rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
					}
				}
			}

		}
	}
</style>